<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>自检上报</text>
		</view>
	</view>
	<scroll-view scroll-y="true" class="scroll-container">
		<view class="body">
			<view class="container">
				<view class="content">
					<view class="projectname">
						<view class="lef"> <text>*</text>
							<view class="name">项目名称</view>
						</view>
						<view class="input">
							<input type="text" placeholder="请输入项目名称" v-model="projectname"/>
						</view>
					</view>
		
					<view class="projectname">
						<view class="lef"> <text>*</text>
							<view class="name">报告编号</view>
						</view>
						<view class="input">
							<input type="text" placeholder="请输入报告编号" v-model="ReportNumber"/>
						</view>
					</view>
		
		
					<view class="projectname">
						<view class="lef"> <text>*</text>
							<view class="name">检测类别</view>
						</view>
						<view class="input">
							<uni-data-select
							        v-model="selectvalue"
							        :localdata="range"
							        @change="change"
							      ></uni-data-select>
						</view>
					</view>
		
					<view class="projectname">
						<view class="lef"> <text>*</text>
							<view class="name">受检单位</view>
						</view>
						<view class="input">
							<input type="text" name="" id="" placeholder="请输入受检单位名称" v-model="Inspectionunit"/>
						</view>
					</view>
		
		
					<view class="projectname">
						<view class="lef"> <text>*</text>
							<view class="name"> 检测机构</view>
						</view>
						<view class="input">
							<input type="text" name="" id="" placeholder="请输入检测机构名称" v-model="Testingorganization" />
						</view>
					</view>
		
		
					<view class="projectname">
						<view class="lef"> <text>*</text>
							<view class="name"> 检测日期</view>
						</view>
						<view class="input sdf">
						<view class="example-body">
							<uni-datetime-picker type="datetime" v-model="Testdate" @change="changeLog" />
						</view>
						</view>
					</view>
		
		
					<view class="projectname">
						<view class="lef"> <text>*</text>
							<view class="name">报告日期</view>
						</view>
						<view class="input">
							<view class="example-body">
								<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="Reportdate" />
							</view>
						</view>
					</view>
		
					<view class="projectnames">
						<view class="hhhh">
							<text>*</text>
							<view class="zhengshu">检测机构资质认定证书 </view>
						</view>
						<view class="example-body">
							<uni-file-picker
							 @progress="handleProgress"
							  @fail="handleFail"
							></uni-file-picker>
							<view class="hhk">（上传照片）</view>
						</view>
					</view>
		
				</view>
			</view>
		</view>
		
		<view class="bodys">
			<view class="container">
				<view class="bbs">
					<view class="nnj" v-show="yang">
						<view class="image">
							<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/baitian.png" mode=""></image>
						</view>
						<view class="tex">昼间监测</view>
					</view>
					<!--采集人员照片 -->
					<view class="peoplepicture">
						<text>*</text> <view class="picture">采样人员照片（1张)</view>
					</view>
					<view class="deatliy">
						含时间、地点信息要素，要求采样人头像清晰,可辩性强；如果一次多 人参加采样，只需上传此次采样的负责人照片。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					
					
					
					<view class="peoplepicture hjuy">
						<text>*</text> <view class="picture">采样布点照片(至少4张)</view>
					</view>
					<view class="deatliy">
						此照片为采样人正在布点实施采样时拍摄，含采样开始时间、地点、 采样因子等信息。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					
					
					
					<view class="peoplepicture hjuy">
						<text>*</text> <view class="picture">采样过程照片(1张)</view>
					</view>
					<view class="deatliy">
						此照片无特定要求，只需要能体现采样即可。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					
					
					<view class="peoplepicture hjuy">
						<text>*</text> <view class="picture">结束照片</view>
					</view>
					<view class="deatliy">
						此照片为此次采样结束后拍摄，含结束时间、地点、收集采样信息数 量（所有采样瓶、罐一起拍摄）。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					<view class="jiuyg" v-show="button">
						<view class="peoplepicture hjuy">
							<text>*</text> <view class="picture">检测文件报告</view>
						</view>
						<view class="example-body">
						<uni-file-picker limit="5" file-mediatype="all" ></uni-file-picker>
						</view>
						<button class="submit">提交</button>
					</view>
					
				</view>
				
				
				<view class="bbs" v-show="shows">
					<view class="nnj rft">
						<view class="image">
							<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/wansahng.png" mode=""></image>
						</view>
						<view class="tex">夜间监测(22点至次日6点)</view>
					</view>
					<!--采集人员照片 -->
					<view class="peoplepicture">
						<text>*</text> <view class="picture">采样人员照片（1张)</view>
					</view>
					<view class="deatliy">
						含时间、地点信息要素，要求采样人头像清晰,可辩性强；如果一次多 人参加采样，只需上传此次采样的负责人照片。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					
					
					
					<view class="peoplepicture hjuy">
						<text>*</text> <view class="picture">采样布点照片(至少4张)</view>
					</view>
					<view class="deatliy">
						此照片为采样人正在布点实施采样时拍摄，含采样开始时间、地点、 采样因子等信息。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					
					
					
					<view class="peoplepicture hjuy">
						<text>*</text> <view class="picture">采样过程照片(1张)</view>
					</view>
					<view class="deatliy">
						此照片无特定要求，只需要能体现采样即可。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					
					
					<view class="peoplepicture hjuy">
						<text>*</text> <view class="picture">结束照片</view>
					</view>
					<view class="deatliy">
						此照片为此次采样结束后拍摄，含结束时间、地点、收集采样信息数 量（所有采样瓶、罐一起拍摄）。
					</view>
					<view class="example-body">
						<uni-file-picker></uni-file-picker>
					</view>
					
					<view class="peoplepicture hjuy">
						<text>*</text> <view class="picture">检测文件报告</view>
					</view>
					<view class="example-body">
					<uni-file-picker limit="5" file-mediatype="all" ></uni-file-picker>
					</view>
					
					<button class="submit">提交</button>
				</view>
			</view>
		</view>
	</scroll-view>
	
	
	
	
	<!-- 噪音 -->
	
	
	
	
	
</template>

<script setup>
	import {
		ref
	} from 'vue';
	var range = ref([{
			value: 0,
			text: "废气、废水"
		},
		{
			value: 1,
			text: "废气"
		},
		{
			value: 2,
			text: "游泳"
		},
	])
 var shows = ref(false)
 var button = ref(false)
 var yang = ref(true)
  const selectvalue = ref("")
  
  function change(e) {
    // selectvalue 已经通过 v-model 被正确赋值，不需要再手动设值
    console.log('当前选中值:', e)
    if (selectvalue.value === 1) {
      shows.value = false
      button.value = true
      yang.value = false
    } else {
      shows.value = true
      button.value = false
      yang.value = true
    }
  
    // 查找完整对象
    const selectedItem = range.value.find(item => item.value === selectvalue.value)
    console.log('完整对象:', selectedItem)
  }
	function back() {
		uni.navigateBack({
			delta: 1
		})
	}
	
 // 定义响应式数据
	var projectname = ref("")
	var ReportNumber = ref("")
	var Inspectionunit = ref("")
	var Testingorganization = ref("")
	var Testdate = ref("")
	var datetimesingle = ref("")
	// 检测日期
	function changeLog (e){
		Testdate.value = e
		console.log(Testdate.value);
	}
	function Reportdate (e){
		datetimesingle.value = e
	}
	
	// 上传图片
	function handleProgress (res){
		console.log(res);
		const tempFilePath = res.tempFilePaths[0] 
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}
.scroll-container {
  height: calc(100vh - 142rpx); /* 头部高度 */
  overflow: auto;
}
	.body {
		width: 100%;

	}

	.container {
		width: 750rpx;
		// height: 100%;
		// background-color: red;
	}

	.content {
		width: 710rpx;
		margin: 0 auto;

		.projectname {
			width: 730rpx;
			height: 59rpx;
			// background-color: yellow;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 30rpx;

			.lef {
				width: 139rpx;
				height: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 31rpx;
				line-height: 33rpx;
				line-height: 28rpx;
				display: flex;

				text {
					color: red;
				}
			}
		}
.sdf{
	width: 531rpx;
	height: 59rpx;
	background: #FAFAFA;
	border-radius: 7rpx;
}
		.input {
			width: 531rpx;
			height: 59rpx;
			background: #FAFAFA;
			border-radius: 7rpx;
			border: 1px solid #BFBFBF;
             position: relative;
			 .example-body{
				 width: 531rpx;
				 height: 59rpx;
				 position: absolute;
				 top: -33rpx;
			 }
			.jju {
				width: 531rpx;
				height: 59rpx;
			}

			input {
				width: 531rpx;
				height: 59rpx;
				background: #FAFAFA;
				text-indent: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				border: none;
			}
		}
	}

	.projectnames {
		width: 730rpx;
		margin: auto;
		margin-top: 30rpx;

		.hhhh {
			margin-left: 13rpx;
			display: flex;
			width: 330rpx;
			height: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 31rpx;
			line-height: 28rpx;

			text {
				color: red;
			}
		}
	}
	.example-body{
	 margin-top: 30rpx;
	}
	.bodys{
		width: 100%;
		height: 100%;
		margin-top: 30rpx;
		.container{
			width: 750rpx;
			.bbs{
				width: 710rpx;
				height: 100%;
				// background-color: #0874FA;
				margin: 30rpx auto;
				.nnj{
					width: 580rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.image{
						width: 30rpx;
						// height: 30rpx;
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
					
					.tex{
						width: 509rpx;
						height: 35rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 38rpx;
						color: #333333;
						line-height: 24rpx;
					}
				}
			}
		}
	}
	.peoplepicture{
		margin-top: 30rpx;
		width: 383rpx;
		height: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 31rpx;
		color: #F82A24;
		line-height: 33rpx;
		display: flex;
		// justify-content: space-around;
		align-items: center;
		.picture{
			width: 333rpx;
			height: 30rpx;
			color: #333333 ;
			
		}
	}
	.deatliy{
		margin-top: 30rpx;
		width: 671rpx;
		height: 59rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 22rpx;
		color: #F66060;
		// line-height: 59rpx;
		// background-color: #F66060;
	}
	.hjuy{
		width: 403rpx;
		// background-color: #F66060;
	}
	.submit{
		margin-top: 100rpx;
		margin-bottom: 20rpx;
		width: 672rpx;
		height: 88rpx;
		background: #0874FA;
		border-radius: 44rpx;
		color: #FFFFFF;
	}
	
</style>